<div class="navigation-top"
  [ngClass]="{
      'navigation-top-collapsed': collapsed,
      'navigation-top-collapsed-labels': collapsed&&showLabels
    }">
  <clr-vertical-nav
  [clrVerticalNavCollapsible]="false"
  [(clrVerticalNavCollapsed)]="collapsed"
  (clrVerticalNavCollapsedChange)="updateNavCollapsed($event)"
>
  <div class="navigation-main">
  <div class="module-nav">
    <clr-tabs clrLayout="vertical"
      [ngClass]="{
        'module-tabs': !showLabels,
        'module-tabs-labels': showLabels
      }">
    >
      <clr-tab *ngFor="let tab of modules; let i = index; trackBy: identifyTab">
        <div clrTabLink (click)="setModule(i)" class="btn-icon"
          [ngClass]="{
            'button-tool': !showLabels,
            'button-tool-labels': showLabels
          }">
            <div *ngIf="showLabels" class="button-wrapper">
              <clr-icon class="icon-nav" [attr.shape]="tab.icon"></clr-icon>
              <div class="button-text-wrapper">
                <div class="button-text">{{tab.title}}</div>
              </div>
            </div>
          <app-octant-tooltip *ngIf="!showLabels" [tooltipText]="tab.title">
            <clr-icon class="icon-nav" [attr.shape]="tab.icon"></clr-icon>
          </app-octant-tooltip>
        </div>
        <ng-template *clrIfActive="i === this.selectedItem.module">
          <clr-tab-content>
            <div></div>
          </clr-tab-content>
        </ng-template>
      </clr-tab>
      </clr-tabs>
    <div class="prefs-button">
      <div (click)="showPrefs()" class="btn-icon btn btn-link nav-link"
           [ngClass]="{
            'button-tool': !showLabels,
            'button-tool-labels': showLabels
          }">
        <div *ngIf="showLabels" class="button-wrapper">
          <clr-icon class="icon-nav" shape="cog"></clr-icon>
          <div class="button-text-wrapper">
            <div class="button-text">Preferences</div>
          </div>
        </div>
        <app-octant-tooltip class= "prefs-tooltip" *ngIf="!showLabels" tooltipText="Preferences">
          <clr-icon class="icon-nav" shape="cog"></clr-icon>
        </app-octant-tooltip>
      </div>
    </div>
  </div>
  <!-- Navigation items -->
  <div
    [ngClass]="{
      'navigation-items-collapsed': collapsed,
      'navigation-items': !collapsed
    }">
    <ng-container
      *ngFor="
        let section of currentModule?.children;
        let i = index;
        trackBy: identifyNavigationItem
      "
    >
      <!-- Collapsed Navigation -->
      <ng-container *ngIf="collapsed; else expanded">
        <a
          clrVerticalNavLink
          (click)="openPopup(i)"
          [ngClass]="{ 'item-selected': i == this.selectedItem.index }"
          [routerLinkActiveOptions]="{ exact: !section.children?.length }"
          [routerLink]="formatPath(section.path)"
          routerLinkActive="active"
          (mouseover)="flyoutIndex = i; selectedItem.index = i"
        >
          <clr-icon
            [attr.shape]="section.iconName | default: 'play'"
            clrVerticalNavIcon
          ></clr-icon>
        </a>

        <div
          class="flyout nav-group-children"
          [ngClass]="{ 'flyout-empty': !section.children?.length }"
          (mouseleave)="flyoutIndex = -1; selectedItem.index = -1"
          (document:mouseleave)="flyoutIndex = -1; selectedItem.index = -1"
        >
          <a
            class="flyout-header"
            (click)="openPopup(i)"
            [routerLinkActiveOptions]="{ exact: !section.children?.length }"
            [routerLink]="formatPath(section.path)"
            routerLinkActive="active"
          >
            {{ section.title }}
          </a>
          <clr-vertical-nav-group-children class="flyout-group">
            <ng-container
              *ngFor="
                let category of section.children;
                trackBy: identifyNavigationItem
              "
            >
              <a
                [routerLink]="formatPath(category.path)"
                [routerLinkActiveOptions]="{ exact: false }"
                routerLinkActive="active"
                class="flyout-item nav-link"
                (click)="setNavState(false, i)"
              >
                {{ category.title }}
              </a>
            </ng-container>
          </clr-vertical-nav-group-children>
        </div>
      </ng-container>
      <!-- Expanded Navigation -->
      <ng-template #expanded>
        <ng-container
          *ngIf="section.children?.length > 0; else noChildExpanded"
        >
          <clr-vertical-nav-group
            routerLinkActive="active"
            [clrVerticalNavGroupExpanded]="shouldExpand(i)"
            (clrVerticalNavGroupExpandedChange)="setNavState($event, i)"
          >
            <clr-icon
              [attr.shape]="section.iconName | default: 'exclamation-circle'"
              clrVerticalNavIcon
            ></clr-icon>
            {{ section.title }}
            <clr-vertical-nav-group-children>
              <a
                clrVerticalNavLink
                [routerLink]="formatPath(section.path)"
                [routerLinkActiveOptions]="{ exact: true }"
                routerLinkActive="active"
              >
                Overview
              </a>
              <ng-container
                *ngFor="
                  let category of section.children;
                  trackBy: identifyNavigationItem
                "
              >
                <a
                  clrVerticalNavLink
                  [routerLink]="formatPath(category.path)"
                  [routerLinkActiveOptions]="{ exact: false }"
                  routerLinkActive="active"
                >
                  <clr-icon
                    *ngIf="itemIcon(category) as categoryIcon"
                    [attr.shape]="categoryIcon"
                    clrVerticalNavIcon
                  ></clr-icon>
                  {{ category.title }}
                </a>
              </ng-container>
            </clr-vertical-nav-group-children>
          </clr-vertical-nav-group>
        </ng-container>
        <ng-template #noChildExpanded>
          <a
            clrVerticalNavLink
            (click)="closePopups(i)"
            [routerLink]="formatPath(section.path)"
            [routerLinkActiveOptions]="{ exact: i==0 }"
            routerLinkActive="active"
          >
            <clr-icon *ngIf="section.iconName"
              [attr.shape]="section.iconName"
              clrVerticalNavIcon
            ></clr-icon>
            <div class="nav-item-text"
                 [ngClass]="{ 'nav-item-padded': !section.iconName }"
            >
              {{ section.title }}
            </div>
          </a>
        </ng-template>
      </ng-template>
    </ng-container>
    <div *ngIf="!collapsed" class="nav-description">
      <div class="nav-description-inner">
        <div class="clr-row">
          <div class="clr-col-12">
            <div class="card">
              <div class="card-header">
                {{ currentModule?.title }}
              </div>
              <div class="card-block">
                <div class="card-text">
                {{ currentModule?.description }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</clr-vertical-nav>
</div>
